<script setup lang="ts">
  import routeComponentName from '@/config/route-component-name'
  import { nextTick, onMounted, ref } from 'vue'
  import StorePosting from './components/store-posting/index.vue'
  import CheckFlow from './components/check-flow/index.vue'

  defineOptions({
    name: routeComponentName.setting.check,
  })

  const storePostingInstance = ref<InstanceType<typeof StorePosting> | null>(null)
  const checkFlowInstance = ref<InstanceType<typeof CheckFlow> | null>(null)
  const activeTab = ref('storePosting')
  const tabs = ref([
    {
      label: '仓库过账',
      value: 'storePosting',
    },
    {
      label: '审批流',
      value: 'checkFlow',
    },
  ])

  const handleChangeTab = (tab: string) => {
    activeTab.value = tab
    nextTick(() => {
      getList()
    })
  }

  const getList = () => {
    if (activeTab.value === 'storePosting' && storePostingInstance.value) {
      storePostingInstance.value.getList()
    }

    if (activeTab.value === 'checkFlow' && checkFlowInstance.value) {
      checkFlowInstance.value.getList()
    }
  }

  onMounted(() => {
    nextTick(() => {
      getList()
    })
  })
</script>

<template>
  <div class="check-set-page">
    <div class="body">
      <div class="content">
        <div class="sidebar">
          <div
            v-for="(tab, tabIndex) in tabs"
            :key="tabIndex"
            :class="{ 'sidebar-item': true, 'sidebar-item-active': activeTab === tab.value }"
            @click="handleChangeTab(tab.value)"
          >
            {{ tab.label }}
          </div>
        </div>
        <div class="component-wrapper">
          <store-posting v-if="activeTab === 'storePosting'" ref="storePostingInstance" />
          <check-flow v-if="activeTab === 'checkFlow'" ref="checkFlowInstance" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .check-set-page {
    width: 100%;
    height: calc(100vh - 92px);
    padding: 12px;
    box-sizing: border-box;

    .body {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 12px;

      .content {
        border: 1px solid #ebf6f6;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;

        .sidebar {
          border-right: 1px solid #ebf6f6;
          width: 170px;
          box-sizing: border-box;
          height: 100%;

          .sidebar-item {
            height: 40px;
            cursor: pointer;
            box-sizing: border-box;
            padding-right: 20px;
            text-align: right;
            line-height: 40px;
            font-size: 14px;

            &:hover {
              color: $primaryColor;
            }
          }

          .sidebar-item-active {
            background-color: rgba(0, 124, 255, 0.07);
            border-left: 3px solid #007cff;
            color: #007cff;
          }
        }

        .component-wrapper {
          height: 100%;
          flex: 1;
          width: 0;
        }
      }
    }
  }
</style>
